<template>
  <van-popup 
			class="kefu-popup"
			:overlay-style="{height: 'inherit', bottom: '51px'}"
			round 
			v-model="show" 
			position="bottom"
			@click-overlay="cancel"
		>
		<van-row class="popup-head" type="flex" justify="space-between">
        <van-col span="4"></van-col>
        <van-col span="18" class="head-text">有问题？请咨询我</van-col>
        <van-col span="4" class="c-main text-right" @click="cancel">
        	<van-icon class="c-gray-l" name="cross"/>
        </van-col>
      </van-row>
			<!-- 非游客 -->
      <div class="popup-body" v-if="role !== '0'">
      	<p class="kefu-title" v-if="QRCODE || ACCOUNT"><span class="bg-main-gradient">1</span> 长按或扫一扫微信咨询</p>
      	<span class="bg-gray qr_code" v-if="QRCODE">
      		<img v-lazy="QRCODE" alt="">
      	</span>
      	<p class="c-gray-l" v-if="ACCOUNT">微信名：{{ACCOUNT}}</p>
      	<p class="dot" v-if="(QRCODE || ACCOUNT) && TEL"></p>
      	<p class="kefu-title" v-if="TEL"><span class="bg-main-gradient">{{(QRCODE || ACCOUNT) ? '2' : '1'}}</span> 电话咨询</p>
      	<p v-if="TEL">
      		<span class="bg-gray c-main" style="font-size: 16px;">
	      		<van-icon class-prefix="ucai-icon" name="dianhua"/>
	      		<a :href="'tel:' + TEL">{{TEL}}</a>
      		</span>
      	</p>
      </div>
			<!-- 游客 -->
			<div class="popup-body" v-else>
      	<div v-if="tel" class="text-center" style="font-size: 16px;">
					<p>电话咨询</p>
      		<span class="bg-gray c-main">
	      		<van-icon class-prefix="ucai-icon" name="dianhua"/>
	      		<a :href="'tel:' + tel">{{tel}}</a>
      		</span>
      	</div>
      	<p class="dot" v-if="tel"></p>
				<div>
					<p>服务人：{{service_name}}</p>
					<p class="mg-top-sm" v-if="service_company">服务公司：{{service_company}}</p>
				</div>
      </div>
		</van-popup>
</template>
<script>
	import { 
    Icon, 
		Popup,
		Row,
		Col 
	} from 'vant';
	import { getConfig } from '@/api/modules/index'
	import {
    getRole
  } from '@utils/role'
export default {
  name: 'kefu-popup',
  components: {
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  props: {
		// TODO: 不要用$ref调用方法
    tel: {
      type: String,
      default: ''
		},
		account: {
			type: String,
			default: ''
		},
    qrcode: {
      type: String,
      default: ''
		},
		name: {
      type: String,
      default: ''
		},
		service_name: String, // 分销商姓名，产品保证一定会有
		service_company: String,
		role_type: { //TODO：未登录带加密串，无法识别是不是游客，因此加了这个来识别，默认是分销商
			type: String,
			default: 'distributor'
		}
  },
  data() {
    return {
			service: null,
			show: false,
			TEL: this.tel,
			NAME: this.name,
			QRCODE: this.qrcode,
			ACCOUNT: this.account,
			role: getRole(),
    }
	},
	watch: {
		show(){
			if(this.show){
				// 分销商-有产品客服就产品客服，不然就系统
				// 游客-分销商客服
				this.role !== '0' && this.getService()
			}
		},
		service: {
			handler(nw){
				this.TEL = this.tel || nw.phone
				this.NAME = this.name || nw.name
				this.QRCODE = this.qrcode || nw.qr
				this.ACCOUNT = this.account || nw.account
			}
		}
	},
  methods: {
		init(is_show = true) {
			if(this.role_type === 'customer')this.role = '0'
			this.show = is_show
		},
    cancel() {
      this.show = false;
      this.$emit('cancle')
		},
		getService () {
			if(this.service){
				return
			}
			getConfig(['customer_service', 'customer_wechat'])
				.then(res => {
					const data = res.data || {}
					this.service = {
						...data.customer_service,
						...data.customer_wechat,
					}
				})
		},
  }
}
</script>
<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
@import "~@style_m/components/popup";

  .kefu-popup {
		bottom: 51px;
		.qr_code{
			width: 120px;
    		height: 120px;
			img{
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}
		p {
			margin: 0;
		}
		.popup-body {
			padding: 20px;
		}
		.kefu-title {
			color: #333;
			font-size: 15px;
			span {
				font-size: 13px;
				display: inline-block;
				width: 16px;
				height: 16px;
				line-height: 16px;
				text-align: center;
				color: white;
				border-radius: 5px;
			}
		}
		.dot {
			margin: 15px 0;
			height: 3px;
			background: url('~@imgs/icon/dot.png') repeat-x;
			background-size: auto 3px;
		}
		.bg-gray {
			display: inline-block;
			margin: 10px 0;
			padding: 10px;
			border-radius: 15px;
			background-color: #f8f8f8;
			.qrcode {
				background: white;
				padding: 5px;
			}
		}
	}
</style>